iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

震驚!Android竟能做到這些.....系列 第 5

第五篇:介紹基礎元件

  • 分享至 

  • xImage
  •  

Button、Textview、EditView

這三個都是在設計時常用的原件分別是 按鈕、文字、可編輯文字

ImageView

在設計版面時時常會需要用到一些圖示或照片來協助設計版面,此篇就是要教如何把選定好的圖片加入到我們的專案裡,並且使用到版面上
步驟:

  1. 將圖片加入到專案的資料夾
    專案存放的地方 -> app -> src -> main -> res -> drawable
  2. 將圖片引用到專案裡
    在布局文件裡使用 ImageView 元件再用 src 來綁定圖片
<ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/mypicture"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent" />

Spinner

此元件用在下拉式選單,當有較多選擇可供選擇但又不想把版面佔滿時就可用這個下拉式選單
步驟:
1.在布局文件上增加這個元件

<Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.906"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="95dp" />

2.在 res -> values 下增加一個xml檔
https://ithelp.ithome.com.tw/upload/images/20200903/20129418EAnYN02kOv.png
3.在裡面設計你要的內容

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="test">
        <item>內容1</item>
        <item>內容2 </item>
        <item>內容3</item>
        <item>內容4</item>
        <item>內容5</item>
    </string-array>
</resources>

4.在布局中的 Spinner 綁定資料

<Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.906"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="95dp"
        android:entries="@array/test"/>

Guideline

這個元件是在 constraintlayout 下特有的一個元件,分為垂直和水平,他的主要功能是設計一個邊界使我們更方便的來佈局
使用方法:
更改 orientation 的值即可變為垂直

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="202dp" />

上一篇
第四篇:搞懂不同Layout之間的差異(下)
下一篇
第六篇:進階元件使用(webview)
系列文
震驚!Android竟能做到這些.....9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言